<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <script src="js/jquery-2.2.3.min.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <link href="css/zui.min.css" rel="stylesheet">
    <script src="js/zui.min.js"></script>
<!--    <link href="lib/datagrid/zui.datagrid.min.css" rel="stylesheet">-->
<!--    <script src="lib/datagrid/zui.datagrid.min.js"></script>-->

    <!-- ZUI 标准版压缩后的 CSS 文件 -->
<!--    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/zui/1.9.2/css/zui.min.css">-->

<!--    &lt;!&ndash; ZUI Javascript 依赖 jQuery &ndash;&gt;-->
<!--    <script src="//cdnjs.cloudflare.com/ajax/libs/zui/1.9.2/lib/jquery/jquery.js"></script>-->
<!--    &lt;!&ndash; ZUI 标准版压缩后的 JavaScript 文件 &ndash;&gt;-->
<!--    <script src="//cdnjs.cloudflare.com/ajax/libs/zui/1.9.2/js/zui.min.js"></script>-->

    <script src="lib/selectable/zui.selectable.js"></script>
    <script src="lib/datagrid/zui.datagrid.js"></script>
    <link href="lib/datagrid/zui.datagrid.css" rel="stylesheet">
</head>
<body>
<div class="example">
    <div id="datagridExample" class="datagrid datagrid-borderless">
        <header class="clearfix">
            <button class="btn btn-primary" type="button">主要按钮</button>
            <button class="btn btn-primary" type="button">主要按钮</button>
            <button class="btn btn-primary" type="button">主要按钮</button>
            <div class="input-control search-box search-box-circle has-icon-left has-icon-right pull-right" id="searchboxExample1">
                <input id="inputSearchExample1" type="search" class="form-control search-input" placeholder="搜索">
                <label for="inputSearchExample1" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
                <a href="#" class="input-control-icon-right search-clear-btn"><i class="icon icon-remove"></i></a>
            </div>
            <h3>数据表格功能综合演示xxxxxx</h3>
        </header>
        <div class="datagrid-container"></div>
        <div class="pager"></div>
    </div>
</div>


<div id="datagridBorderlessExample" class="datagrid datagrid-borderless"></div>
<div>
    <ul class="pager">
        <li class="previous"><a href="your/nice/url">«</a></li>
        <li><a href="your/nice/url">1</a></li>
        <li class="active"><a href="your/nice/url">2</a></li>
        <li><a href="your/nice/url">3</a></li>
        <li><a href="your/nice/url">4</a></li>
        <li><a href="your/nice/url">5</a></li>
        <li class="next"><a href="your/nice/url">»</a></li>
    </ul>
</div>
<div id="datagridStripedExample" class="datagrid datagrid-striped"></div>


<table class="layui-hide" id="test"></table>
<!--<script>-->
<!--    $.ajax({-->
<!--        // url:'http://192.168.0.104:8005/test/get/data',-->
<!--        url:'http://127.0.0.1:8005/test/get/data',-->
<!--        type: "GET",-->
<!--        dataType: 'json',-->
<!--        success: function (res) {-->
<!--            // window.alert('===' + JSON.stringify(res))-->
<!--            renderInfo(res.data)-->
<!--        }-->
<!--    });-->

<!--    function renderInfo(data) {-->
<!--       console.log('==' + JSON.stringify(data))-->

<!--    }-->
<!--</script>-->


<script>
    $(function () {
        console.log('======')
        afterPageLoad()
    })
    function afterPageLoad() {
        // 获取示例数据
        var getSampleData = function() {
            console.log('======getSampleData.getSampleData')
            var getRandomInt = function(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            };
            var getRandomData = function(arr, start, end) {
                if (start === undefined) {
                    start = 0;
                }
                if (end === undefined) {
                    end = arr.length;
                }
                return arr[getRandomInt(start, end - 1)];
            };
            var getLuckInt = window.getLuckInt = function(min, max, luck) {
                return (luck % (max - min) + min);
            };
            var getLuckData = window.getLuckData = function(arr, start, end, luck) {
                if (start === undefined || start === null) {
                    start = 0;
                }
                if (end === undefined || end === null) {
                    end = arr.length;
                }
                return arr[getLuckInt(start, end - 1, luck)];
            };
            var createDataSample = function(size) {
                console.log('======createDataSample.111')
                size = size || 100;
                var heros = ['力丸', '幻影刺客', '祈求者', '斧王', '巫医', '天辉防御塔', 'Roshan', '嗜血狂魔', '宙斯', '影魔', '米波', '树精卫士'];
                var actions = ['击杀', '拾取', '购买', '治疗'];
                var items = ['圣剑', '虚灵之刃', '真视宝石', '恐鳌之心', '远行鞋', '治疗指环', '黑皇杖', '刷新球', '金箍棒', '蝴蝶', '诡计之雾', '显影之尘', '侦查守卫', '岗哨守卫', '漩涡', '天堂之戟', '刃甲', '希瓦的守护', '强袭胸甲', '阿托斯之棍', '银月之晶', '斯嘉蒂之眼', '玲珑心', '撒旦之邪力', '否决挂饰', '隐刀', '血棘', '邪恶镰刀', '白银之锋', '辉耀', '代达罗斯之殇', '幻影斧', '林肯法球', '阿哈利姆神杖', '死灵书'];
                var runes = ['赏金神符', '双倍神符', '魔法神符', '极速神符', '不朽之守护', '奶酪'];
                var cols = [
                    {label: '对局时xxx间', name: 'time', width: 200, valueType: 'gametime', sort: true},
                    {label: '英雄', name: 'hero', width: 80},
                    {label: '动作', name: 'action', width: 80},
                    {label: '队友', name: 'teammate', width: 80},
                    {label: '敌人', name: 'enemy', width: 80},
                    {label: '物品/神符', name: 'item', width: 80},
                    {label: '获得经验', name: 'gotexps', width: 80, valueType: 'number'},
                    {label: '获得金钱', name: 'gotgolds', width: 80, valueType: 'number'},
                    {label: '累计经验', name: 'exps', width: 80, valueType: 'number'},
                    {label: '剩余金钱', name: 'golds', width: 80, valueType: 'number'},
                    {label: '描述', name: 'desc', width: 'auto', minWidth: 200},
                    {label: '累计人头', name: 'kills', width: 110, valueType: 'number'},
                ];
                var createDataItem = function(index) {
                    var luckNumber = parseInt((Math.sin(index + 1) + '').substr(3));
                    var time = 600 + 5*index + getLuckInt(0, 5, luckNumber);
                    var action = getLuckData(actions, null, null, luckNumber);
                    var heroIndex = getLuckInt(0, action === '击杀' ? 6 : 4, luckNumber);
                    var hero = heros[heroIndex];
                    var teammate, enemy, item;
                    var heroData = {
                        golds: heroIndex*500*heroIndex + 71*index + getLuckInt(0, 71, luckNumber),
                        exps: heroIndex*300*heroIndex + 43*index + getLuckInt(0, 43, luckNumber),
                        kills: heroIndex + Math.floor(index/10)
                    };
                    var gotExps = 0;
                    var gotGolds = 0;
                    switch (action) {
                        case '击杀':
                            enemy = getLuckData(heros, 6, 9, luckNumber);
                            gotExps += getLuckInt(0, 1000 + index * 10, luckNumber);
                            gotGolds += getLuckInt(0, 200 + index * 8, luckNumber);
                            if (hero === '力丸') {
                                action = '偷摸';
                            } else if (hero === '斧王') {
                                action = '斩杀';
                            }
                            break;
                        case '购买':
                            item = getLuckData(items, null, null, luckNumber);
                            break;
                        case '拾取':
                            item = getLuckData(runes, null, null, luckNumber);
                            if (item === '赏金神符') {
                                gotExps += getLuckInt(0, 50 + index, luckNumber);
                                gotGolds += getLuckInt(0, 50 + index * 2, luckNumber);
                            }
                            break;
                        case '治疗':
                            teammate = getLuckData(heros, 0, 4, luckNumber);
                            if (hero === '巫医') {
                                action = '奶';
                            }
                            break;
                    }
                    heroData.golds += gotGolds;
                    heroData.exps += gotExps;
                    var desc = hero + action + '了“' + (item || teammate || enemy) + '”';
                    if (gotGolds) {
                        desc += '，获得了金钱 ' + gotGolds;
                    }
                    if (gotExps) {
                        desc += '，' + (gotGolds ? '并' : '') + '获得了经验 ' + gotExps;
                    }
                    desc += '。';
                    var dataItem = {
                        id: time,
                        time: time,
                        hero: hero,
                        action: action,
                        teammate: teammate || '',
                        enemy: enemy || '',
                        item: item || '',
                        gotgolds: gotGolds || '',
                        gotexps: gotExps || '',
                        exps: heroData.exps,
                        golds: heroData.golds,
                        kills: heroData.kills,
                        desc: desc
                    };
                    return dataItem;
                };
                return {
                    dataSource: {
                        cols: cols,
                        length: size,
                        getByIndex: createDataItem
                    },
                    valueOperator: {
                        gametime: {
                            getter: function(time) {
                                var hours = Math.floor(time/3600);
                                if (hours < 10) {
                                    hours = '0' + hours;
                                }
                                var mins = Math.floor(time/60)%60;
                                if (mins < 10) {
                                    mins = '0' + mins;
                                }
                                var secs = time%60;
                                if (secs < 10) {
                                    secs = '0' + secs;
                                }
                                return hours + ':' + mins + ':' + secs;
                            }
                        }
                    },
                    generate: function (size) {
                        var result = [];
                        for(var i = 0; i < size; ++i) {
                            result.push(createDataItem(i));
                        }
                        return result;
                    }
                };
            };
            var sampleSize = 10000000000000;
            return createDataSample(sampleSize);
        };
        var sampleData = getSampleData();
        $('#datagridExample,#datagridBorderlessExample,#datagridStripedExample').datagrid({
            configs: {
                'R0C0': {
                    label: '#'
                },
                'C1': {
                    style: {textAlign: 'right'}
                },
                'C2': {
                    style: {fontWeight: 'bold'}
                }
            },
            dataSource: {
                cols: sampleData.dataSource.cols,
                data: sampleData.generate(100),
                cache: true,
            },
            valueOperator: sampleData.valueOperator,
            states: {
                pager: {page: 1, recPerPage: 10},
            },
            height: 300,
            renderDelay: 200,
            checkable: true,
            sortable: true,
            // hoverCell: true,
            onSelectRow: function(rowIndex, checked, selections) {
                // console.log('DataGrid Demo: 行', rowIndex, checked ? '选中了' : '取消选中了', selections);
                console.log('DataGrid Demo: 行', JSON.stringify(selections));

            },
            onClickCell: function(event, cell, $cell) {
                console.log('DataGrid Demo: 点击了单元格第', cell.rowIndex, '行', cell.colIndex, '列', cell, event, $cell);
            }
        });
        var simpleDataSource = {
            cols: sampleData.dataSource.cols,
            data: sampleData.generate(50),
        };
        $('#tableDataGridExample').datagrid({
            height: 184
        });
        $('#remoteDataGridExample').datagrid({
            height: 'page',
            states: {
                pager: {page: 1, recPerPage: 5},
            },
            dataSource: {
                cache: false,
                cols:[
                    {name: 'time', label: '对局时间122', width: 131},
                    {name: 'hero', label: '英雄', width: 134},
                    {name: 'action', label: '动作', width: 109},
                    {name: 'target', label: '目标', width: 109},
                    {name: 'desc', label: '描述', width: 287}
                ],
                remote: function(params) {
                    return {
                        // 原创请求地址
                        url: 'docs/partial/remote-data-' + params.page + '.json',
                        // 请求类型
                        type: 'GET',
                        // 数据类型
                        dataType: 'json'
                    };
                }
            },
        });
        $('#dynamicDataGridExample').datagrid($.extend({
            defaultDateFormatter: 'hh:mm:ss',
            states: {
                fixedTopUntil: 0,
                fixedBottomFrom: sampleData.dataSource.length,
                fixedRightFrom: 12,
                pager: {page: 0}
            },
            configs: {
                'C1': {
                    style: {textAlign: 'right'}
                },
                'C2': {
                    style: {fontWeight: 'bold', color: '#448aff'}
                }
            },
            renderDelay: 200,
            checkable: false,
            sortable: false,
        }, sampleData));
        $('#datagridFixedExample').datagrid({
            dataSource: simpleDataSource,
            valueOperator: sampleData.valueOperator,
            states: {
                pager: {page: 1, recPerPage: 100},
                fixedLeftUntil: 0,
                fixedRightFrom: 12,
                fixedTopUntil: 0,
                fixedBottomFrom: 100,
            },
            height: 300,
        });
        $('#datagridSortExample').datagrid({
            dataSource: {
                cols: sampleData.dataSource.cols,
                data: sampleData.generate(100),
            },
            valueOperator: sampleData.valueOperator,
            sortable: true,
            height: 300,
        });
        $('#datagridPageExample').datagrid({
            dataSource: simpleDataSource,
            states: {
                pager: {page: 1, recPerPage: 20},
            },
            valueOperator: sampleData.valueOperator,
            sortable: true,
            height: 300,
        });
        $('#datagridSearchExample').datagrid({
            dataSource: simpleDataSource,
            states: {
                pager: {page: 1, recPerPage: 20},
            },
            valueOperator: sampleData.valueOperator,
            sortable: true,
            height: 300,
        });
        $('#datagridCheckableExample').datagrid({
            dataSource: simpleDataSource,
            states: {
                pager: {page: 1, recPerPage: 20},
            },
            valueOperator: sampleData.valueOperator,
            checkable: true,
            height: 300,
        });
        $('#datagridSpanExample').datagrid({
            dataSource: simpleDataSource,
            states: {
                pager: {page: 1, recPerPage: 20},
            },
            configs: {
                R1C1: {colspan: 2},
                R2C3: {rowspan: 3}
            },
            valueOperator: sampleData.valueOperator,
            height: 300,
        });
        $('#datagridValueOperatorExample').datagrid({
            dataSource: simpleDataSource,
            states: {
                pager: {page: 1, recPerPage: 20},
            },
            valueOperator: {
                // date 值转换器会影响所有 valueType 为 `date` 的列
                gametime: {
                    getter: function(dataValue, cell, dataGrid) {
                        return '第' + (Math.floor(dataValue%60)) + '分钟第' + (dataValue%60) + '秒';
                    }
                }
            },
            height: 300,
        });
        $('#datagridConfigsExample').datagrid({
            dataSource: simpleDataSource,
            states: {
                pager: {page: 1, recPerPage: 20},
            },
            configs: {
                C2: {
                    className: 'text-right',
                    style: {
                        color: '#00b8d4',
                        backgroundColor: '#e0f7fa'
                    }
                },
                R1C1: {
                    style: {textDecoration: 'underline'}
                }
            },
            height: 300,
        });
    }
</script>
</body>
</html>
